<template>
  <div class="todoList">
    <p class="list_title">事务中心</p>
    <div v-if="viewData" class="list_item">
      <!-- <li>
        <router-link :to="'logistics/transport/0'+'?timestamp='+timestamp">
          <span>待发车运输单</span>
          <span class="right_span">
            <span class="mainColor">{{ viewData.waitShipments }}</span>
            <i class="el-icon-arrow-right grey" />
          </span>
        </router-link>
      </li>
      <li>
        <router-link :to="'logistics/transport/2'+'?timestamp='+timestamp">
          <span>待定价运输单</span>
          <span class="right_span">
            <span class="mainColor">{{ viewData.alreadyReceiving }}</span>
            <i class="el-icon-arrow-right grey" />
          </span>
        </router-link>
      </li> -->
      <li>
        <router-link :to="'logistics/transport/3'+'?timestamp='+timestamp" class="flex_box">
          <span class="left_span">待收款</span>
          <span class="right_span">
            <span class="mainColor">{{ viewData.alreadyGathering }}</span>
            <i class="el-icon-arrow-right grey" />
          </span>
        </router-link>
      </li>

    </div>
  </div>
</template>

<script>
import { logisticsTransactions } from '@/api/data'
export default {
  name: 'TodoList',
  data() {
    return {
      viewData: {}
    }
  },
  computed: {
    timestamp: function() {
      return Date.parse(new Date())
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    async init() {
      const result = await logisticsTransactions()
      if (result.code === 200) this.viewData = result.data
    }
  }
}
</script>

<style scoped lang='scss'>
.procurement-box {
  margin-top: 10px;
  border-radius: 5px;
}
.chart_view,
.todoList {
  padding: 20px;
  background: white;
  height: 420px;
}
.list_title {
  font-weight: bold;
}
.list_item{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list_item::after{
   content: "";
   height: 0;
   width: 33%;
}
.list_item li {
  width: 25%;
  border: 1px solid #eee;
  padding: 10px 15px;
  list-style-type: none;
  margin-bottom: 10px;
  cursor: pointer;
  margin-bottom: 40px;
  margin-right: 10px;
  // justify-content: space-between;
  font-size:14px;

}
.flex_box{
    display: flex;
    justify-content: space-between;
}
.right_span {
  // margin-left: 80%;
  // border:1px solid red;
  // float: right;
}
</style>
